<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="__static__/assets/css/layui.css">
    <link rel="stylesheet" href="__static__/assets/css/admin.css">
    <script src="__static__/Common/jquery.min.js"></script>
    <script src="__static__/assets/layui.js"></script>
    <script src="__static__/Common/vue.js"></script>

    <title>网院计算机协会|个人中心</title>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin" id="app">
        <div class="layui-header custom-header">
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item slide-sidebar" lay-unselect>
                    <a href="javascript:;" class="icon-font"><i class="ai ai-menufold"></i></a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:; "v-text="username" ></a>
                    <dl class="layui-nav-child">
                        <dd><a href="">公告通知</a></dd>
                        <dd><a href="" id="loginout">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-side custom-admin">
            <div class="layui-side-scroll">

                <div class="custom-logo">
                    <img src="assets/images/logo.png" alt=""/>
                    <h1>网院计算机协会欢迎你！</h1>
                </div>
                <ul id="Nav" class="layui-nav layui-nav-tree">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <i class="layui-icon">&#xe612;</i>
                            <em>个人信息</em>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="userinfo">个人资料</a></dd>
                            <dd><a href="prove">会员证明</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="meetingsign">
                            <i class="layui-icon">&#xe612;</i>会议签到
                        </a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="leave">
                            <i class="layui-icon">&#xe612;</i>
                            请假
                        </a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <i class="layui-icon">&#xe612;</i>
                            <em>学习天地</em>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="homework">作业提交</a></dd>
                            <dd><a href="download">资源下载</a></dd>
                            <dd><a href="video">教学视频</a></dd>
                        </dl>
                    </li>
                </ul>

            </div>
        </div>

        <div class="layui-body">
             <div class="layui-tab app-container" lay-allowClose="true" lay-filter="tabs">
                <ul id="appTabs" class="layui-tab-title custom-tab"></ul>
                <div id="appTabPage" class="layui-tab-content"></div>
            </div>
        </div>

        <div class="layui-footer">
            <p>© 2018 版权所有: 湖南网络工程职业学院计算机协会      <a style="margin-left: 20%" href="http://www.mycodes.net/" target="_blank">技术支持(授权)： 湖南网络工程职业学院计算机协会理事会主席—宋杰</a></p>
        </div>

        <div class="mobile-mask"></div>
    </div>

</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            "username":""
        },
        methods: {
        },
        computed: {
        },
        filters: {
        },
        mounted: function () {
                var then = this;
                $.ajax({
                    type: "post",
                    url: "api/getuserInfo",
                    async: true,
                    contentType: "application/json",
                    success: function (resp) {
                        then.username =resp.data.Name;
                    },
                    error:function(err){
                        console.log(err)
                    }
                });
        }
    })
</script>

<script>
    layui.define(['element','layer'],function(exports){

        var $ = layui.$, $body = $('body'),
                element = layui.element,
                layer = layui.layer;

        var screen_size = {
            pc : [991, -1],
            pad : [768, 990],
            mobile : [0, 767]
        };

        var getDevice = function(){
            var width = $(window).width();
            for (var i in screen_size) {
                var sizes = screen_size[i],
                        min = sizes[0],
                        max = sizes[1];
                if(max == -1) max = width;
                if(min <= width && max >= width){
                    return i;
                }
            }
            return null;
        }

        var isDevice = function(label){
            return getDevice() == label;
        }

        var isMobile = function(){
            return isDevice('mobile');
        }

        var Tab = function(el){
            this.el = el;
            this.urls = [];
        }

        Tab.prototype.content = function(src) {
            var iframe = document.createElement("iframe");
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("src", src);
            iframe.setAttribute("data-id", this.urls.length);
            return iframe.outerHTML;
        };

        Tab.prototype.is = function(url) {
            return (this.urls.indexOf(url) !== -1)
        };

        Tab.prototype.add = function(title, url) {
            if(this.is(url)) return false;
            this.urls.push(url);
            element.tabAdd(this.el, {
                title : title
                ,content : this.content(url)
                ,id : url
            });
            this.change(url);
        };

        Tab.prototype.change = function(url) {
            element.tabChange(this.el, url);
        };

        Tab.prototype.delete = function(url) {
            element.tabDelete(this.el, url);
        };

        Tab.prototype.onChange = function(callback){
            element.on('tab('+this.el+')', callback);
        };

        Tab.prototype.onDelete = function(callback) {
            var self = this;
            element.on('tabDelete('+this.el+')', function(data){
                var i = data.index;
                self.urls.splice(i,1);
                callback && callback(data);
            });
        };

        var Home = function(){

            var tabs = new Tab('tabs'), navItems = [];

            $('#Nav a').on('click',function(event){
                event.preventDefault();
                var $this = $(this), url = $this.attr('href'),
                        title = $.trim($this.text());
                if( url && url!=='javascript:;' ){
                    if(tabs.is(url)){
                        tabs.change(url);
                    } else {
                        navItems.push($this);
                        tabs.add(title, url);
                    }
                }
                $this.closest('li.layui-nav-item')
                        .addClass('layui-nav-itemed')
                        .siblings()
                        .removeClass('layui-nav-itemed');
            });

            // 默认触发第一个子菜单的点击事件
            $('#Nav li.layui-nav-item:eq(0) > dl.layui-nav-child > dd > a:eq(0)').trigger('click');

            tabs.onChange(function(data){
                var i = data.index, $this = navItems[i];
                if($this && typeof $this === 'object') {
                    $('#Nav dd').removeClass('layui-this');
                    $this.parent('dd').addClass('layui-this');
                    $this.closest('li.layui-nav-item')
                            .addClass('layui-nav-itemed')
                            .siblings()
                            .removeClass('layui-nav-itemed');
                }
            });

            tabs.onDelete(function(data){
                var i = data.index;
                navItems.splice(i,1);
            });

            this.slideSideBar();
        }

        Home.prototype.slideSideBar = function() {
            var $slideSidebar = $('.slide-sidebar'),
                    $pageContainer = $('.layui-body'),
                    $mobileMask = $('.mobile-mask');

            var isFold = false;
            $slideSidebar.click(function(e){
                e.preventDefault();
                var $this = $(this), $icon = $this.find('i'),
                        $admin = $body.find('.layui-layout-admin');
                var toggleClass = isMobile() ? 'fold-side-bar-xs' : 'fold-side-bar';
                if($icon.hasClass('ai-menufold')){
                    $icon.removeClass('ai-menufold').addClass('ai-menuunfold');
                    $admin.addClass(toggleClass);
                    isFold = true;
                    if(isMobile()) $mobileMask.show();
                }else{
                    $icon.removeClass('ai-menuunfold').addClass('ai-menufold');
                    $admin.removeClass(toggleClass);
                    isFold = false;
                    if(isMobile()) $mobileMask.hide();
                }
            });

            var tipIndex;
            // 菜单收起后的模块信息小提示
            $('#Nav li > a').hover(function(){
                var $this = $(this);
                if(isFold) {
                    tipIndex = layer.tips($this.find('em').text(),$this);
                }
            }, function(){
                if(isFold && tipIndex ){
                    layer.close(tipIndex);
                    tipIndex = null
                }
            })

            if(isMobile()){
                $mobileMask.click(function(){
                    $slideSidebar.trigger('click');
                });
            }
        };

        exports('home',new Home);
    });
</script>
<script>
        $('#loginout').click(function(){
            $.ajax({
                type: "get",
                url: "api/loginout",
                async: true,
                contentType: "application/json",
                success: function (resp) {
                    console.log("退出成功");
                },
                error:function(err){
                    console.log(err)
                }
            });
        })
</script>
</html>